<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/static/stylesheets/datatable.css">
    <link rel="stylesheet" type="text/css" href="/static/stylesheets/main.css" />

    {{title}}
  </head>
  <body class="yui-skin-sam">
  {{header}}

  <b>Someday/Maybe Ideas:</b><br />
  <div id="project_section" class="grid">
      <table id="projects">
          <thead>
              <tr>
                  <th>Project</th>
                  <th>URL</th>
                  <th>Label</th>
                  <th>Date Modified</th>
              </tr>
          </thead>
          <tbody>
          {% for proj in projects %}
            <tr>
              <td>{{proj.idea}}</td>
              <td>{{proj.url}}</td>
              <td>{{proj.label}}</td>
              <td>{{proj.modified_date}}</td>
            </tr>
          {% endfor %}
          </tbody>
      </table>
  </div>

  {{footer}}

  <!-- YUI COMMON -->
  <!-- Dependencies -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  <!-- END YUI COMMON -->

  <!-- YUI DATATABLE -->
  <!-- Dependencies -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-min.js"></script>

  <!-- Source files -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-min.js"></script>
  <script>
  var projectTable;

  YAHOO.util.Event.addListener(window, "load", function() {
      YAHOO.example.EnhanceFromMarkup = new function() {
          var myColumnDefs = [
              {key:"project", label:"Project", sortable:true},
              {key:"url", label:"URL", sortable:true},
              {key:"label", label:"Label", sortable:true, hidden:false},
              {key:"mod_date", label:"Modified Date", sortable:true, hidden:false}
          ];

          this.myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("projects"));
          this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
          this.myDataSource.responseSchema = {
              fields: [
                      {key:"project"},
                      {key:"url"},
                      {key:"label"},
                      {key:"mod_date"}
              ]
          };

          this.myDataTable = new YAHOO.widget.DataTable("project_section", myColumnDefs, this.myDataSource,
                  { sortedBy:{key:"project",dir:"asc"} }
          );
          projectTable = this.myDataTable;
      };
  });
  </script>
  <!-- END YUI DATATABLE -->
  </body>
</html>
